<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>item</title>
  <style>
    em{
      color: red;
    }
    .selected {
      color: red;
    }

    dl {
      margin-bottom: 0px;
      margin-top: -1px;
      line-height: 35px;
      border-top: 1px solid #999999;
      border-bottom: 1px solid #999999;
    }

    dl dt {
      width: 120px;
      border-right: 1px solid;
      background-color: #DDDDDD;
    }

    dl dd {
      width: 150px;
      margin-left: 0;
      margin-right: 0;
    }

    dl dd:hover {
      background-color: #26d1e1;
    }

    dl dt, dl dd, ul li {
      list-style: none;
      float: left;
    }

    .btn-arrow, .btn-arrow:visited, .btn-arrow:link, .btn-arrow:active {
      width: 46px;
      height: 23px;
      border: 1px solid #DDD;
      background: #FFF;
      line-height: 23px;
      font-family: "\5b8b\4f53";
      text-align: center;
      font-size: 16px;
      color: #AAA;
      text-decoration: none;
      out-line: none
    }

    .btn-arrow:hover {
      background-color: #1299ec;
      color: whitesmoke;
    }

    .top-pagination {
      display: block;
      padding: 3px 15px;
      font-size: 11px;
      font-weight: 700;
      line-height: 18px;
      color: #999;
      text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
      text-transform: uppercase;
      float: right;
      margin-top: 6px
    }

    .top-pagination span {
      margin-right: 10px;
    }

    a {
      text-decoration: none
    }

    #app {
      width: 80%;
      text-align: center;
      margin: auto;
    }

    .item-title {
      overflow: hidden;
      width: 100%;
      font-size: 14px;
      color: #666666;
      text-align: center;
      padding-left: 5px;
      padding-right: 5px;
    }

    .item-box {
      height: 370px;
      padding-top: 20px;
      text-align: center;
      width: 18%;
      border: 1px solid #FFFFFF;
    }

    .item-box:hover {

      box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.1);
    }
  </style>
</head>
<body>
<div id="app">
  <h1>黑马90期搜索系统</h1>
  <!--关键字搜索-->
  <div>
    <input title="输入关键字搜索商品" v-model="params.key" type="text"
           style="width: 300px; margin-bottom: 20px; line-height: 25px">
    <button style="line-height: 25px; margin-left: -6px" @click="search">搜索</button>
  </div>
  <!--过滤项-->
  <div>
    <dl>
      <dt><strong>内存 &nbsp;&nbsp; </strong></dt> &nbsp;&nbsp;
      <dd><a href="javascript:void(0)"> 1GB</a></dd>
      <dd><a href="javascript:void(0)"> 2GB</a></dd>
      <dd><a href="javascript:void(0)"> 4GB</a></dd>
      <dd><a href="javascript:void(0)"> 6GB</a></dd>
    </dl>
    <dl>
      <dt><strong>机身存储 &nbsp;&nbsp; </strong></dt> &nbsp;&nbsp;
      <dd><a href="javascript:void(0)"> 16GB</a></dd>
      <dd><a href="javascript:void(0)"> 32GB</a></dd>
      <dd><a href="javascript:void(0)"> 64GB</a></dd>
      <dd><a href="javascript:void(0)"> 128GB</a></dd>
    </dl>
    <dl>
      <dt><strong>价格范围 &nbsp;&nbsp; </strong></dt> &nbsp;&nbsp;
      <dd><a href="javascript:void(0)">999及以下</a></dd>
      <dd><a href="javascript:void(0)">1000~1999</a></dd>
      <dd><a href="javascript:void(0)">2000~3499</a></dd>
    </dl>
  </div>

  <div>
    <!--排序条件-->
    <div>
      <br>
      <ul>
        <li>
          <a class="selected" href="javascript:void(0)">综合</a> &nbsp;|&nbsp;
        </li>
        <li>
          <a href="javascript:void(0)">价格↓ ↑</a> &nbsp;|&nbsp;
        </li>
        <li>
          <a href="javascript:void(0)">销量</a> &nbsp;|&nbsp;
        </li>
        <li>
          <a href="javascript:void(0)">新品</a> &nbsp;|&nbsp;
        </li>
      </ul>
    </div>
    <!--分页条-->
    <div class="top-pagination">
      <span>共 <i style="color: #222;">{{total}}+</i> 商品</span>
      <span><i style="color: red;">{{params.page}}</i>/{{totalPage}}</span>
      <a class="btn-arrow" href="#" style="display: inline-block" @click="prePage">&lt;</a>
      <a class="btn-arrow" href="#" style="display: inline-block" @click="nextPage">&gt;</a>
    </div>
  </div>
  <br>
  <hr>
  <!--商品列表-->
  <ul>
    <li class="item-box" v-for="item in itemList">
      <div>
        <a href="/1.html">
          <img :src="item.image" alt="" width="250" height="250"/>
        </a>
        <div style=" font-size: 16px">
          <strong><span>￥</span> <span style="color: darkred;">{{item.price/100}}</span></strong>&nbsp;&nbsp;共售出 <span
            style="color: blue">{{item.sold}}</span> 件
        </div>
        <div class="item-title" v-html="item.title"></div>

      </div>
    </li>
  </ul>
</div>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script>
  axios.defaults.baseURL = "http://localhost:8080";

  let app = new Vue({
    el: "#app",
    data: {
      filterList: [
        {
          key: "ram",
          text: "内存",
          options: ["其它", "1GB", "2GB", "4GB", "6GB", "8GB"]
        },
        {
          key: "rom",
          text: "机身存储",
          options: ["其它", "16GB", "32GB", "64GB", "128GB", "256GB", "512GB"]
        },
        {
          key: "price",
          text: "价格范围",
          options: ["999及以下", "1000~1999", "2000~3499", "3500~3999", "4000~4499", "4500以上"]
        }
      ],// 过滤项的假数据
      sortField: [
        {
          key: "score",
          text: "综合",
        },
        {
          key: "price",
          text: "价格",
        },
        {
          key: "sold",
          text: "销量",
        },
        {
          key: "updateTime",
          text: "新品",
        }
      ],// 排序字段的假数据
      itemList: [],// 商品数据
      total: 0, // 总条数
      totalPage: 0, // 总页数
      params: {
        key: "手机", // 搜索关键字
        page: 1, // 当前页码
        size: 10, // 每页大小
      }
    },
    watch:{
      "params.page"(){
        // 每当page改变，当前代码就会执行。搜索一下
        this.search();
      }
    },
    created() {
      // 页面加载时，先搜索一下
      this.search();
    },
    methods: {
      search() {
        // 发送ajax
        axios.get("/item/list", {
            params: this.params
          })
          .then(resp =>{
            this.itemList = resp.data.items;
            this.total = resp.data.total;
            this.totalPage = resp.data.totalPage;
          })
          .catch(err => console.log(err))
      },
      prePage(){
        if(this.params.page > 1){
          this.params.page--
        }
      },
      nextPage(){
        if(this.params.page < this.totalPage){
          this.params.page++
        }
      }
    }
  })
</script>
</body>
</html>